<!--导入群发短信 详情（右侧）-->
<template>
  <div class="si-detail" v-loading="loading">
      <!--导入数据  tab-->
      <div class="table-wrap">
        <div class="deploy">
          <Pagination
            class="fr"
            :small="true"
            :currentPage="currentPage"
            :count="countImport"
            @turnPage="handleCurrentChangeImport"
            :totalPage="Math.ceil(countImport/pageSize)">
          </Pagination>
        </div>
        <el-table
          v-if="!trueDateLoading"
          size="mini"
          :data="tableData"
          stripe>
          <el-table-column
            prop="name"
            :label="$t('public.customerName')">
          </el-table-column>
          <el-table-column
            prop="phone"
            :label="$t('public.phoneNum')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('public.state')">
          </el-table-column>
        </el-table>
        <div style="height: 200px;" v-if="trueDateLoading" v-loading="trueDateLoading">
        </div>
      </div>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'quesImportDetail',
    data () {
      return {
        tableDataInvalid: [],
        tableData: [],
        loading: true,
        falseDateLoading: false,
        trueDateLoading: false,
        pageSize: 10,
        currentPage: 1,
        id: '',
        countImport: 0
      }
    },
    methods: {
      handleImportData (data, flag) {
        let tableData1 = []
        let list = data
        for (var i in list) {
//          let status = this.$store.state.session.dicMap.custTmpls[0].status[list[i].status] || this.$t('config.customer.statusDel')
          let obj = {
            name: list[i].name || '',
            status: list[i].status === 'uncomplete' ? this.$t('questionnaire.unComplete') : this.$t('questionnaire.complete'),
            phone: list[i].phone || ''
          }
          tableData1.push(obj)
        }
        if (flag) {
          this.tableData = tableData1
        } else {
          this.tableDataInvalid = tableData1
        }
      },
//       查询导入数据方法
      searchTrueData () {
        if (!this.id) {
          return
        }
        this.trueDateLoading = true
        this.$store.dispatch('queryQuestionTaskImport', {batchNo: this.id, page: this.currentPage}).then((resp) => {
          this.trueDateLoading = false
          let list = resp.list ? resp.list : []
          if (list) {
            this.handleImportData(list, true)
          }
        })
      },
//      分页查询 导入数据分页
      handleCurrentChangeImport (val) {
        this.currentPage = val
        this.searchTrueData()
      },
//      初始化数据
      fetchData () {
        this.loading = true
        this.id = this.$route.path.split('/')[6]
        if (!this.id) {
          this.loading = false
          return
        }
        this.currentPage = 1
        this.$store.dispatch('queryQuestionTaskImport', {batchNo: this.id, page: this.currentPage}).then((resp) => {
          this.loading = false
          let list = resp.list ? resp.list : []
          this.countImport = resp.count
          if (list) {
            this.handleImportData(list, true)
          }
        })
      }
    },
    watch: {
      $route (to, form) {
        if (to.path.split('/')[2] === 'config') {
          this.fetchData()
        }
      }
    },
    beforeMount () {
      this.fetchData()
    },
    components: {
      Pagination
    }
  }
</script>
<style lang="stylus" scoped>
  /*@import "../../../../assets/common.styl"*/
  .si-detail
    margin-left 341px
    height calc(100vh - 116px)
    padding-bottom 20px
    overflow auto
    .table-wrap
      padding 0 20px
      margin-top 16px
      .deploy
        height 48px
        line-height 48px
        border 1px solid #ebebeb
        border-bottom none
        padding-left 14px
        .fr
          padding-top 10px
          height 38px
</style>
